<script setup lang="ts">
import { mockTable } from '@/mock'

const { data, columns, load } = mockTable(
  ['projectCode', 'projectManager', 'saleMan', 'department', 'saleDepartment', 'part1', 'part2', 'cost', 'startTime'],
  [
    '项目编码',
    '项目经理',
    '销售人员',
    '项目交付',
    '销售所属部门',
    '甲方名称',
    '乙方名称',
    '金额',
    '开始时间',
  ],
)
</script>

<template>
  <ElCard class="card is-flex">
    <template #header>
      <div class="header">
        <div class="title">
          部门在跑项目累计计划人天：10000
        </div>
        <div class="title">
          部门在跑项目累计已用人天：5000
        </div>
        <div class="title">
          部门在跑项目累计可用人天：5000
        </div>
      </div>
    </template>

    <ElTabs @tab-change="load">
      <ElTabPane label="正在参与" />
      <ElTabPane label="历史参与" />
      <ElTabPane label="人员工作安排通知" />
    </ElTabs>

    <ElTable
      :border="true"
      :stripe="true"
      :data="data"
    >
      <ElTableColumn
        v-for="item in columns"
        :key="item.property"
        v-bind="item"
      />
    </ElTable>

    <div class="pagination-container">
      <ElPagination
        layout="prev,pager,next,jumper,total"
        :total="data.length"
      />
    </div>
  </ElCard>
</template>

<style lang="scss" scoped>
.card {
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;

    > :not(:first-child) {
      margin-left: 6%;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }
}
</style>

<route lang="json5">
{
  "meta": {
    "index": 2,
    "title": "部门看板",
  },
}
</route>
